App.require(["canvasTool"], function (canvasTool) {
    var app = App.getCurrent();

    app.defineLayer("str-btn-layer", {
        render: function (next) {
            this.initProperty();
            this.data.isChange = true;
            this.data.isMouseIn = false;
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        getDomObj: function () {
            this.attachDom("btnlayer", "btnlayer");
        },
        clickLayerHandler: function (ev, ctx, ratio) {
            if (this.containsBounds(ctx, ev.clientX, ev.clientY, ratio)) {
                this.dispatchCustomEvent("btnlayerclick", {
                    component: this,
                    event: ev
                });
            }
        },
        get transform() {
            return this.getValue("transform");
        },
        set transform(value) {
            this.setValue("transform", value);
        },
        get position() {
            return this.getValue("position");
        },
        set position(value) {
            this.setValue("position", value);
        },
        get src() {
            return this.getValue("src");
        },
        set src(value) {
            this.setValue("src", value);
        },
        get width() {
            return this.getValue("width");
        },
        set width(value) {
            this.setValue("width", value);
        },
        get height() {
            return this.getValue("height");
        },
        set height(value) {
            this.setValue("height", value);
        },
        get y() {
            return this.getValue("y");
        },
        set y(value) {
            this.setValue("y", value);
        },
        get x() {
            return this.getValue("x");
        },
        set x(value) {
            this.setValue("x", value);
        },
        get shadow() {
            return this.getValue("shadow");
        },
        set shadow(value) {
            this.setValue("shadow", value);
        },
        set hidden(value) {
            this.setValue("hidden", value);
        },
        get hidden() {
            return this.getValue("hidden");
        },
        get sx() {
            return this.getValue("sx");
        },
        set sx(value) {
            this.setValue("sx", value);
        },
        get sy() {
            return this.getValue("sy");
        },
        set sy(value) {
            this.setValue("sy", value);
        },
        get sw() {
            return this.getValue("sw");
        },
        set sw(value) {
            this.setValue("sw", value);
        },
        set sh(value) {
            this.setValue("sh", value);
        },
        get sh() {
            return this.getValue("sh");
        },
        set opacity(value) {
            this.setValue("opacity", value);
        },
        get opacity() {
            return this.getValue("opacity");
        },
        get animation() {
            return this.getValue("animation");
        },
        set animation(value) {
            if (this.setValue("animation", value)) {
                if (value) this.addPropertyAnimation(value, this);
            }
        },
        set transition(value) {
            this.setValue("transition", value);
        },
        get transition() {
            return this.getValue("transition");
        },
        set content(value) {
            this.setValue("content", value);
        },
        get content() {
            return this.getValue("content");
        },
        set font(value) {
            this.setValue("font", value);
        },
        get font() {
            return this.getValue("font");
        },
        set fill(value) {
            this.setValue("fill", value);
        },
        get fill() {
            return this.getValue("fill");
        },
        set stroke(value) {
            this.setValue("stroke", value);
        },
        get stroke() {
            return this.getValue("stroke");
        },
        createPath: function (ctx, ratio) {
            var w = this.width, h = this.height;
            var pObj = this.createPosition(this.position, w, h);
            ctx.translate(this.x * ratio, this.y * ratio);
            ctx.beginPath();
            ctx.rect(pObj.x * ratio, pObj.y * ratio, w * ratio, h * ratio);
        },
        initProperty: function () {
            var property = this.property;

            if (property.src) this.pushImageSrc(property.src);
            if (property.animation) this.addPropertyAnimation(property.animation, this);
            this.data.attributeStr = this._createPropertyStr(property);
            property.content = this.slot;
        },
        moveLayerHandler: function (ev, ctx, ratio) {
            if (this.containsBounds(ctx, ev.clientX, ev.clientY, ratio)) {
                if (!this.data.isMouseIn) {
                    this.data.isMouseIn = true;
                    this.dispatchCustomEvent("btnlayermouseenter", {
                        component: this,
                        event: ev
                    });
                }
            }
            else {
                if (this.data.isMouseIn) {
                    this.data.isMouseIn = false;
                    this.dispatchCustomEvent("btnlayermouseleave", {
                        component: this,
                        event: ev
                    });
                }
            }
        },
        drawSelf: function (ctx, ratio) {
            var dObj = this.getPropertyUse(["opacity", "x", "y", "shadow", "sx", "sy", "sw", "sh", "width", "height", "font", "fill", "stroke"]);
            if (typeof dObj.opacity !== "undefined") ctx.globalAlpha = parseFloat(dObj.opacity);
            ctx.translate(dObj.x * ratio, dObj.y * ratio);
            this.transformView(ctx, ratio);
            if (dObj.shadow) this.useShadow(ctx, dObj.shadow, ratio);
            var src = this.src, w, h;
            if (src) {
                var img = this.getImgBySrc(src);
                if (!img) return;
                if (dObj.sx && dObj.sy && dObj.sw && dObj.sh) {
                    w = (dObj.width || dObj.sw) * ratio;
                    h = (dObj.height || dObj.sh) * ratio;
                    var pObj = this.createPosition(this.position, w, h);
                    ctx.drawImage(img, dObj.sx * ratio, dObj.sy * ratio, dObj.sw * ratio, dObj.sh * ratio, pObj.x, pObj.y, w, h);
                }
                else {
                    w = (dObj.width || img.width) * ratio;
                    h = (dObj.height || img.height) * ratio;
                    var pObj = this.createPosition(this.position, w, h);
                    ctx.drawImage(img, pObj.x, pObj.y, w, h);
                }
            }
            if (this.content) {
                if (dObj.font) ctx.font = this.computeFont(dObj.font, ratio); 
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.translate(pObj.x + w / 2, pObj.y + h / 2);
                if (dObj.fill) {
                    ctx.fillStyle = this.getFillOrStrokeStyle(dObj.fill);
                    ctx.fillText(this.content, 0, 0);
                }
                if (dObj.stroke) {
                    ctx.strokeStyle = this.getFillOrStrokeStyle(dObj.stroke);
                    ctx.strokeText(this.content, 0, 0);
                }
            }
            this.data.isChange = false;
        },
        createPosition: function (str, w, h) {
            switch (str) {
                case "lefttop": return { x: 0, y: 0 };
                case "leftbottom": return { x: 0, y: -h };
                case "righttop": return { x: -w, y: 0 };
                case "rightbottom": return { x: -w, y: -h };
                case "center": return { x : -w / 2, y: -h / 2 };
            }
        },
        dispose: function () {
            this.removeAnimation();
            this.data.isChange = true;
            this.data.isMouseIn = false;
        },
    })
})